<template>
  <div class="each_rank">
    <div class="query_condition">
      <div v-if="active === 'group'">
        <el-row :gutter="15">
          <el-col :span="11">
            <el-col :span="8" style="padding-left:0px;">
              <p class="screen">地区</p>
              <el-select v-model="provinceCode" placeholder="请选择省份" size="mini" filterable @change="changeProvince">
                <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select v-model="cityCode" placeholder="请选择城市" class="screen_mt" size="mini" filterable @change="changeCity">
                <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select v-model="countryCode" placeholder="请选择区域" class="screen_mt" size="mini" filterable @change="changeCounty">
                <el-option v-for="item in countryList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="13" align="right">
            <el-input v-model="selectedMsg.Keyword" class="gl_mr_10 screen_mt" placeholder="请输入队伍名称" size="mini" style="width:30%;" clearable @change="getPageList()" />
            <el-button type="primary" class="screen_mt" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-if="active === 'personal'">
        <el-row :gutter="15">
          <el-col :span="14">
            <el-col :span="6" style="padding-left:0px;">
              <p class="screen">地区</p>
              <el-select v-model="provinceCode" placeholder="请选择省份" size="mini" filterable @change="changeProvince">
                <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="cityCode" placeholder="请选择城市" class="screen_mt" size="mini" filterable @change="changeCity">
                <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="countryCode" placeholder="请选择区域" class="screen_mt" size="mini" filterable @change="changeCounty">
                <el-option v-for="item in countryList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <p class="screen">性别</p>
              <el-select v-model="GenderCode" size="mini" placeholder="请选择性别" @change="getPageList()">
                <el-option label="全部" :value="null" />
                <el-option label="男" value="M" />
                <el-option label="女" value="W" />
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="10" align="right">
            <el-input v-model="selectedMsg.Keyword" class="gl_mr_10 screen_mt" placeholder="请输入姓名" size="mini" style="width:40%;" clearable @change="getPageList()" />
            <el-button type="primary" class="screen_mt" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-if="active === 'coach'">
        <el-row :gutter="15">
          <el-col :span="14">
            <el-col :span="6" style="padding-left:0px;">
              <p class="screen">地区</p>
              <el-select v-model="provinceCode" placeholder="请选择省份" size="mini" filterable @change="changeProvince">
                <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="cityCode" placeholder="请选择城市" class="screen_mt" size="mini" filterable @change="changeCity">
                <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="countryCode" placeholder="请选择区域" class="screen_mt" size="mini" filterable @change="changeCounty">
                <el-option v-for="item in countryList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <p class="screen">性别</p>
              <el-select v-model="GenderCode" size="mini" placeholder="请选择性别" @change="getPageList()">
                <el-option label="全部" :value="null" />
                <el-option label="男" value="M" />
                <el-option label="女" value="W" />
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="10" align="right">
            <el-input v-model="selectedMsg.Keyword" class="gl_mr_10 screen_mt" placeholder="请输入姓名" size="mini" style="width:40%;" clearable @change="getPageList()" />
            <el-button type="primary" class="screen_mt" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-if="active === 'leader'">
        <el-row :gutter="15">
          <el-col :span="14">
            <el-col :span="6" style="padding-left:0px;">
              <p class="screen">地区</p>
              <el-select v-model="provinceCode" placeholder="请选择省份" size="mini" filterable @change="changeProvince">
                <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="cityCode" placeholder="请选择城市" class="screen_mt" size="mini" filterable @change="changeCity">
                <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="countryCode" placeholder="请选择区域" class="screen_mt" size="mini" filterable @change="changeCounty">
                <el-option v-for="item in countryList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <p class="screen">性别</p>
              <el-select v-model="GenderCode" size="mini" placeholder="请选择性别" @change="getPageList()">
                <el-option label="全部" :value="null" />
                <el-option label="男" value="M" />
                <el-option label="女" value="W" />
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="10" align="right">
            <el-input v-model="selectedMsg.Keyword" class="gl_mr_10 screen_mt" placeholder="请输入姓名" size="mini" style="width:40%;" clearable @change="getPageList()" />
            <el-button type="primary" class="screen_mt" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-if="active === 'areas'">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-col :span="9" style="padding-left:0px;">
              <p class="screen">排序方式</p>
              <el-select v-model="selectedMsg.DistrictType" placeholder="请选择排序方式" size="mini" filterable @change="changeAreas">
                <el-option v-for="item in dict.districtType" :key="item.code" :label="item.value" :value="item.code" />
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="12" style="text-align:right;">
            <el-input v-model="selectedMsg.Keyword" class="gl_mr_10 screen_mt" placeholder="输入名称进行搜索" size="mini" style="width:35%;" clearable @change="getPageList()" />
            <el-button type="primary" class="screen_mt" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table_container">
      <el-table v-if="active === 'group'" v-loading="loading" size="mini" :data="tableData" class="gl_table_noBorder" style="width: 100%" :cell-style="{'cursor':'pointer'}" @row-click="goGroup">
        <el-table-column label="排名" align="center" :width="70">
          <template slot-scope="{ row }">
            <div v-if="row.finalRank === 1" class="allNumber numberOne">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 2" class="allNumber numberTwo">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 3" class="allNumber numberThree">{{ row.finalRank }}</div>
            <div v-else class="allNumber">{{ row.finalRank }}</div>
          </template>
        </el-table-column>
        <el-table-column label="队伍名称" :min-width="200">
          <template slot-scope="{ row }">
            <div class="img_cell">
              <img class="table_photo" :src="getStaticFileUrl(row.photoUrl)" alt="">
              <el-popover placement="bottom" width="300" trigger="hover" :content="row.name">
                <span slot="reference" class="table_name">{{ row.name ? row.name.length > 12 ? row.name.substr(0, 12) + '...' : row.name : '--' }}</span>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属地区" :width="210">
          <template slot-scope="{ row }">
            <el-popover placement="bottom" width="300" trigger="hover" :content="row.organization">
              <span slot="reference" class="table_name">{{ row.organization ? row.organization.length > 12 ? row.organization.substr(0, 12) + '...' : row.organization : '--' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="goldCount" label="金牌" />
        <el-table-column prop="silverCount" label="银牌" />
        <el-table-column prop="bronzeCount" label="铜牌" />
        <el-table-column prop="finalPoints" label="团体总分" />
      </el-table>
      <el-table v-if="active === 'personal'" v-loading="loading" size="mini" :data="tableData" class="gl_table_noBorder" style="width: 100%" :cell-style="{'cursor':'pointer'}" @row-click="goPersonal">
        <el-table-column label="排名" align="center" :width="70">
          <template slot-scope="{ row }">
            <div v-if="row.finalRank === 1" class="allNumber numberOne">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 2" class="allNumber numberTwo">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 3" class="allNumber numberThree">{{ row.finalRank }}</div>
            <div v-else class="allNumber">{{ row.finalRank }}</div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="160">
          <template slot-scope="{ row }">
            <div class="img_cell">
              <img class="table_photo" :src="getStaticFileUrl(row.photoUrl)" alt="">
              <el-popover placement="bottom" width="300" trigger="hover" :content="row.name">
                <div slot="reference" class="table_name">{{ row.name ? row.name.length > 4 ? row.name.substr(0, 4) + '...' : row.name : '--' }}</div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" :min-width="48" />
        <el-table-column label="所属机构" :min-width="100">
          <template slot-scope="{ row }">
            <el-popover placement="bottom" width="300" trigger="hover" :content="row.organization">
              <span slot="reference" class="table_name">{{ row.organization ? row.organization.length > 5 ? row.organization.substr(0, 5) + '...' : row.organization : '--' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="所属地区" :min-width="100">
          <template slot-scope="{ row }">
            <el-popover placement="bottom" width="300" trigger="hover" :content="row.comment">
              <span slot="reference" class="table_name">{{ row.comment ? row.comment.length > 6 ? row.comment.substr(0, 6) + '...' : row.comment : '--' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="goldCount" label="金牌" :min-width="48" />
        <el-table-column prop="silverCount" label="银牌" :min-width="48" />
        <el-table-column prop="bronzeCount" label="铜牌" :min-width="48" />
        <el-table-column label="战绩" :min-width="85">
          <template slot-scope="{ row }">
            <span class="rate_success">{{ row.winCount !== null && row.winCount !== undefined ? row.winCount : 0 }}胜/</span>
            <span class="rate_error">{{ row.loseCount !== null && row.loseCount !== undefined ? row.loseCount : 0 }}负</span>
          </template>
        </el-table-column>
        <el-table-column prop="winPercent" label="胜率" :min-width="68">
          <template slot-scope="{ row }">
            <span class="rate_success">{{ row.winPercent !== null && row.winPercent !== undefined ? (row.winPercent) % 1 === 0 ? (row.winPercent * 100) + '%' : (row.winPercent * 100).toFixed(2) + '%' : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="finalPoints" label="个人总分" :min-width="80" />
      </el-table>
      <el-table v-if="active === 'coach'" v-loading="loading" size="mini" :data="tableData" class="gl_table_noBorder" style="width: 100%" :cell-style="{'cursor':'pointer'}">
        <el-table-column label="排名" align="center" :width="70">
          <template slot-scope="{ row }">
            <div v-if="row.finalRank === 1" class="allNumber numberOne">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 2" class="allNumber numberTwo">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 3" class="allNumber numberThree">{{ row.finalRank }}</div>
            <div v-else class="allNumber">{{ row.finalRank }}</div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" :min-width="160">
          <template slot-scope="{ row }">
            <div class="img_cell">
              <img class="table_photo" :src="getStaticFileUrl(row.photoUrl)" alt="">
              <el-popover placement="bottom" width="300" trigger="hover" :content="row.name">
                <div slot="reference" class="table_name">{{ row.name ? row.name.length > 4 ? row.name.substr(0, 4) + '...' : row.name : '--' }}</div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" />
        <el-table-column label="所属机构" :min-width="120">
          <template slot-scope="{ row }">
            <el-popover placement="bottom" width="300" trigger="hover" :content="row.organization">
              <span slot="reference" class="table_name">{{ row.organization ? row.organization.length > 6 ? row.organization.substr(0, 6) + '...' : row.organization : '--' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="所属地区" :min-width="120">
          <template slot-scope="{ row }">
            <el-popover placement="bottom" width="300" trigger="hover" :content="row.comment">
              <span slot="reference" class="table_name">{{ row.comment ? row.comment.length > 6 ? row.comment.substr(0, 6) + '...' : row.comment : '--' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="goldCount" label="金牌" />
        <el-table-column prop="silverCount" label="银牌" />
        <el-table-column prop="bronzeCount" label="铜牌" />
        <el-table-column prop="winPercent" label="带队胜率">
          <template slot-scope="{ row }">
            {{ row.winPercent !== null && row.winPercent !== undefined ? (row.winPercent) % 1 === 0 ? (row.winPercent * 100) + '%' : (row.winPercent * 100).toFixed(2) + '%' : '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="finalPoints" label="成绩总分" />
      </el-table>
      <el-table v-if="active === 'leader'" v-loading="loading" size="mini" :data="tableData" class="gl_table_noBorder" style="width: 100%" :cell-style="{'cursor':'pointer'}">
        <el-table-column label="排名" align="center" :width="70">
          <template slot-scope="{ row }">
            <div v-if="row.finalRank === 1" class="allNumber numberOne">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 2" class="allNumber numberTwo">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 3" class="allNumber numberThree">{{ row.finalRank }}</div>
            <div v-else class="allNumber">{{ row.finalRank }}</div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" :min-width="160">
          <template slot-scope="{ row }">
            <div class="img_cell">
              <img class="table_photo" :src="getStaticFileUrl(row.photoUrl)" alt="">
              <el-popover placement="bottom" width="300" trigger="hover" :content="row.name">
                <div slot="reference" class="table_name">{{ row.name ? row.name.length > 4 ? row.name.substr(0, 4) + '...' : row.name : '--' }}</div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" :min-width="48" />
        <el-table-column label="所属机构" :min-width="120">
          <template slot-scope="{ row }">
            <el-popover placement="bottom" width="300" trigger="hover" :content="row.organization">
              <span slot="reference" class="table_name">{{ row.organization ? row.organization.length > 6 ? row.organization.substr(0, 6) + '...' : row.organization : '--' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="所属地区" :min-width="120">
          <template slot-scope="{ row }">
            <el-popover placement="bottom" width="300" trigger="hover" :content="row.comment">
              <span slot="reference" class="table_name">{{ row.comment ? row.comment.length > 6 ? row.comment.substr(0, 6) + '...' : row.comment : '--' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="goldCount" label="金牌" :min-width="48" />
        <el-table-column prop="silverCount" label="银牌" :min-width="48" />
        <el-table-column prop="bronzeCount" label="铜牌" :min-width="48" />
        <el-table-column prop="winPercent" label="带队胜率" :min-width="78">
          <template slot-scope="{ row }">
            {{ row.winPercent !== null && row.winPercent !== undefined ? (row.winPercent) % 1 === 0 ? (row.winPercent * 100) + '%' : (row.winPercent * 100).toFixed(2) + '%' : '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="finalPoints" label="成绩总分" :min-width="78" />
      </el-table>
      <el-table v-if="active === 'areas'" v-loading="loading" size="mini" :data="tableData" class="gl_table_noBorder" style="width: 100%" :cell-style="{'cursor':'pointer'}">
        <el-table-column label="排名" align="center" :width="70">
          <template slot-scope="{ row }">
            <div v-if="row.finalRank === 1" class="allNumber numberOne">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 2" class="allNumber numberTwo">{{ row.finalRank }}</div>
            <div v-else-if="row.finalRank === 3" class="allNumber numberThree">{{ row.finalRank }}</div>
            <div v-else class="allNumber">{{ row.finalRank }}</div>
          </template>
        </el-table-column>
        <el-table-column label="名称" :min-width="260">
          <template slot-scope="{ row }">
            <el-popover placement="bottom" width="300" trigger="hover" :content="row.name">
              <div slot="reference" class="table_name">{{ row.name ? row.name.length > 12 ? row.name.substr(0, 12) + '...' : row.name : '--' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="goldCount" label="金牌" />
        <el-table-column prop="silverCount" label="银牌" />
        <el-table-column prop="bronzeCount" label="铜牌" />
        <el-table-column prop="finalPoints" label="区域总分" />
      </el-table>
    </div>
    <el-row class="gl_pt_20" style="text-align: right;">
      <el-pagination
        :current-page="selectedMsg.Page"
        :total="total"
        :page-size="selectedMsg.MaxResultCount"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import {
  api_GET_Provinces,
  api_GET_CitiesProvinceCode,
  api_GET_CountiesCityCode
} from '@/extend/api/gameswaggerApi/district.js';
import { api_GET_EventsManagementEventResultPlatformPointRankList } from '@/extend/api/gameswaggerApi/app';
import { Api_GET_EventsManagementEventResultPlatformPointRankListQO } from '@/lib/form/game/swaggerForm';
export default {
  props: { active: {
    type: String,
    default() {
      return 'group';
    }
  }
  },
  data() {
    return {
      tableData: [],
      selectedMsg: new Api_GET_EventsManagementEventResultPlatformPointRankListQO(),
      GenderCode: null,
      provinceCode: null,
      cityCode: null,
      countryCode: null,
      provinceList: [],
      cityList: [],
      countryList: [],
      loading: false,
      total: 0
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    }),
    currentType() {
      if (this.active === 'group') {
        return 'Delegation';
      } else if (this.active === 'personal') {
        return 'Register';
      } else if (this.active === 'coach') {
        return 'Coach';
      } else if (this.active === 'leader') {
        return 'Leader';
      } else {
        return 'District';
      }
    }
  },
  watch: {
    'active': {
      immediate: true,
      handler: function(val) {
        this.resetData();
      }
    }
  },
  created() {
    if (this.active !== 'areas') {
      this.apiGetProvinces();
    }
    if (this.active === 'areas') {
      this.getDict();
    }
  },
  methods: {
    // 若没有字典信息，外部可直接调用方法获取字典数据
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取 Provinces 字典
    apiGetProvinces () {
      api_GET_Provinces()
        .then(
          res => {
            res.unshift({ code: null, name: '全部', type: null });
            this.provinceList = res;
          }
        )
        .catch(
          error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          }
        );
    },
    // 获取 Cities 字典
    apiGetCitiesByProvince () {
      api_GET_CitiesProvinceCode(this.provinceCode)
        .then(
          res => {
            res.unshift({ code: null, name: '全部', type: null });
            this.cityList = res;
          }
        )
        .catch(
          error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          }
        );
    },
    // 获取 Counties 字典
    apiGetCountiesByCity () {
      api_GET_CountiesCityCode(this.cityCode)
        .then(
          res => {
            res.unshift({ code: null, name: '全部', type: null });
            this.countryList = res;
          }
        )
        .catch(
          error => {
            const _msg = error.error.message || error.message || '获取失败';
            this.$message({ type: 'error', message: _msg });
          }
        );
    },
    getPageList(page) {
      this.selectedMsg.Type = this.currentType;
      this.selectedMsg.Page = page || 1;
      this.selectedMsg.SkipCount = (this.selectedMsg.Page - 1) * this.selectedMsg.MaxResultCount;
      if (this.selectedMsg.Type !== 'District') {
        this.selectedMsg.DistrictType = this.countryCode ? 'County' : this.cityCode ? 'City' : this.provinceCode ? 'Province' : null;
        this.selectedMsg.DistrictCode = this.countryCode || this.cityCode || this.provinceCode || null;
      }
      if (this.selectedMsg.Type === 'District') {
        this.selectedMsg.DistrictType = this.selectedMsg.DistrictType || this.dict.districtType[0].code;
      }
      this.selectedMsg.GenderCode = this.GenderCode;
      this.loading = true;
      api_GET_EventsManagementEventResultPlatformPointRankList(this.selectedMsg).then(res => {
        this.loading = false;
        this.tableData = res.items;
        this.total = res.totalCount;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    resetData() {
      this.selectedMsg = new Api_GET_EventsManagementEventResultPlatformPointRankListQO();
      this.selectedMsg.Type = this.currentType;
      this.GenderCode = null;
      this.provinceCode = null;
      this.cityCode = null;
      this.countryCode = null;
      this.cityList = [];
      this.countryList = [];
      if (this.selectedMsg.Type === 'District') {
        this.selectedMsg.DistrictType = this.dict.districtType ? this.dict.districtType[0].code : 'Province';
      }
      this.getPageList();
    },
    changeProvince(province) {
      this.cityCode = '';
      this.countryCode = '';
      this.cityList = [];
      this.countryList = [];
      if (province !== null) {
        this.cityCode = null;
        this.apiGetCitiesByProvince();
      }
      this.getPageList();
    },
    changeCity(city) {
      this.countryCode = '';
      this.countryList = [];
      if (city !== null) {
        this.countryCode = null;
        this.apiGetCountiesByCity();
      }
      this.getPageList();
    },
    changeCounty(county) {
      this.getPageList();
    },
    changeAreas() {
      this.getPageList();
    },
    // 获取静态图片
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      }
    },
    // 跳转团体积分
    goGroup(row) {
      this.$router.push({ 'name': 'GroupType', 'query': { 'gid': row.entityId }});
    },
    // 跳转个人积分
    goPersonal(row) {
      this.$router.push({ 'name': 'PersonalType', 'query': { 'pid': row.entityId }});
    },
    changePage(page) {
      this.selectedMsg.Page = page;
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.selectedMsg.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style lang="scss" scoped>

.each_rank {
  padding-left: 24px;
  color: black;
  font-size: 16px;
  text-align: left;
}
.query_condition {
  margin-bottom: 15px;
  .screen {
    font-size: 14px;
    height: 17px;
    line-height: 17px;
  }
  .screen_mt {
    margin-top: 27px;
  }
}
.img_cell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.table_container {
  padding: 20px 10px 30px 10px;
  border-radius: 8px;
  box-shadow: 0px 10px 36px 0px rgba(0,0,0,0.08);
}
.table_photo {
  width: 48px;
  height: 48px;
  margin-right: 10px;
  border-radius: 50%;
}
.table_name {
  line-height: 48px;
}
.el-table {
  border: none !important;
  font-size: 14px;
}
.allNumber {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #353434;
  overflow: visible;
  width: 55px;
  height: 42px;
  line-height: 42px;
  margin: 0 auto;
}
.numberOne {
  color: white;
  background: url('../assets/images/league/rank_1.png') no-repeat;
  background-size: 32px 36px;
  background-position: center center;
}
.numberTwo {
  color: white;
  background: url('../assets/images/league/rank_2.png') no-repeat;
  background-size: 32px 36px;
  background-position: center center;
}
.numberThree {
  color: white;
  background: url('../assets/images/league/rank_3.png') no-repeat;
  background-size: 32px 36px;
  background-position: center center;
}
.winRate {
  font-size: 14px;
  font-weight: 700;
  color: #de1c1c;
}
.rate_success {
  font-weight: 600;
  color: #de1c1c;
}
.rate_error {
  font-weight: 600;
  color: #989898;
}
::v-deep .el-table::before{
  height: 0px;
}
</style>
